<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jQuery操作iframe</title>
<link rel="stylesheet" href="styles_chm.css" type="text/css"/>
</head>
<body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF">
<div class="titlepage">
  <center>
    <h2 class="title" style="color: #69F; text-align: center;font-weight: bolder;">jQuery操作iframe</h2>
  </center>
  参考文献：<br />
  <a href="http://blog.csdn.net/liujs_vb/article/details/7544779">http://blog.csdn.net/liujs_vb/article/details/7544779</a><br />
<a href="http://blog.163.com/codewin@126/blog/static/173669443201231152319351/">http://blog.163.com/codewin@126/blog/static/173669443201231152319351/</a></div>
<p>关于使用原始js方式操作iframe，请另参见[<a href="../JavaScript/js_do_iframe.html">js操作iframe</a>]</p>
<p>jQuery方法：</p>
<p><br />
  1、在父窗口中操作：</p>
<p>选中IFRAME中的所有输入框： $(window.frames[&quot;iframeSon&quot;].document).find(&quot;:text&quot;);</p>
<p><br />
</p>
<p>2、在IFRAME中操作：</p>
<p>选中父窗口中的所有输入框：$(window.parent.document).find(&quot;:text&quot;);</p>
<p>&nbsp;</p>
<p>3、在父窗口中操作：</p>
<p>选中IFRAME中的所有单选钮：$(window.frames[&quot;iframe1&quot;].document).find(&quot;input[@type='radio']&quot;).attr(&quot;checked&quot;,&quot;true&quot;);</p>
<p>&nbsp;</p>
<p>4、在IFRAME中操作：</p>
<p>选中父窗口中的所有单选钮：$(window.parent.document).find(&quot;input[@type='radio']&quot;).attr(&quot;checked&quot;,&quot;true&quot;);</p>
<p>&nbsp;</p>
<p>5、在父窗口中获取IFRAME的innerHTML：</p>
<p>$(window.frames[&quot;myFrm&quot;].document).find(&quot;html&quot;).html();</p>
<p>&nbsp;</p>
<p> 6、父窗口内容中一个ID为mainiframe的ifame：</p>
<p>&lt;iframe id=&quot;mainifame&quot;&gt;...&lt;/ifame&gt;<br />
ifame包含一个someID：&lt;div id=&quot;someID&quot;&gt;you want to get this content&lt;/div&gt;<br />
<br />
  得到someID的内容：<br />
$(&quot;#mainiframe&quot;).contents().find(&quot;someID&quot;).html()  或者 $(&quot;#mainiframe&quot;).contains().find(&quot;someID&quot;).text()值</p>
<p>&nbsp;</p>
<p>7、父窗口内容中有两个ifame：</p>
<p>&lt;iframe id=&quot;leftiframe&quot;&gt;...&lt;/iframe&gt; <br />
  &lt;iframe id=&quot;mainiframe&quot;&gt;...&lt;/iframe&gt;</p>
<p> 在leftiframe中jQuery改变mainiframe的src代码：<br />
$(&quot;#mainframe&quot;,parent.document.body).attr(&quot;src&quot;,&quot;http://www.baidu.com&quot;);</p>
<p>&nbsp;</p>
<p>8、 如上面所示：<br />
  <br />
  leftiframe中的jQuery操作mainiframe的内容someID的内容<br />
$(&quot;#mainframe&quot;,parent.document.body).contents().find(&quot;someID&quot;).html()或者   $(&quot;#mainframe&quot;,parent.document.body).contents().find(&quot;someID&quot;).val()</p>
<p>&nbsp;</p>
<p>9、如何给一个空iframe填充临时html内容：</p>
<p>&lt;iframe id=&quot;myFrm&quot;&gt;...&lt;/ifame&gt;<br />
  iframe没有指定src属性，为空iframe页面。<br />
  <br />
$(window.frames[&quot;myFrm&quot;].document).find(&quot;html&quot;).html(pageHtml);//pageHtml为html元素，且不能包含立即执行的JS脚本。</p>
<p>$(window.frames[&quot;myFrm&quot;].document).find(&quot;body&quot;).html(bodyHtml);//bodyHtml为body元素，且不能包含立即执行的JS脚本。</p>
<p>&nbsp;</p>
<p>10、父窗口内容中有一个iframe：</p>
<p>&lt;iframe id=&quot;myFrm&quot;&gt;...&lt;/iframe&gt; </p>
<p> 在父窗口以window.open或window.showModalDialog弹出另一个页面（可以是.html或.jsp页面）时，<br />
要求弹出的页面立即与父窗口的iframe显示相同的内容：</p>
<p>（1）父窗口代码如下：<br />  &lt;script type=&quot;text/javascript&quot; src=&quot;jquery-1.7.2.min.js&quot;&gt;&lt;/script&gt;<br />
&lt;script type=&quot;text/javascript&quot;&gt;  <br />
  //弹出预览窗口<br />
window.open(&quot;preview.jsp&quot;,&quot;myPreview&quot;,&quot;height=600,width=400,resizable=yes,scrollbars=yes&quot;);//方式一<br />
//window.showModalDialog(&quot;preview.jsp&quot;,window,&quot;dialogWidth=400px;dialogHeight=600px;resizable=yes;scroll=yes;&quot;);//方式二 <br />
&lt;/script&gt;</p>
<p>（2）弹出页面代码如下：<br />
&lt;script type=&quot;text/javascript&quot; src=&quot;jquery-1.7.2.min.js&quot;&gt;&lt;/script&gt;<br />  
  &lt;script type=&quot;text/javascript&quot;&gt;<br />
//获取父窗口<br />
var parentWin = window.opener;<br />
//获取父窗口的myFrm的整个文档内容<br />
var parentWinHtml = parentWin.jQuery(parentWin.frames[&quot;myFrm&quot;].document).find(&quot;html&quot;).html();<br />
//替换为当前窗口的整个文档内容<br />
jQuery(&quot;html&quot;).html(parentWinHtml);<br />
/* //对应方式二：window.showModalDialog<br />
var parentWin = window.dialogArguments<br />
var parentWinHtml = parentWin.jQuery(parentWin.frames[&quot;myFrm&quot;].document).find(&quot;html&quot;).html();<br />
jQuery(&quot;html&quot;).html(parentWinHtml);<br />
*/<br />
&lt;/script&gt;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>以下参考自：<span class="titlepage"><a href="http://blog.163.com/codewin@126/blog/static/173669443201231152319351/">http://blog.163.com/codewin@126/blog/static/173669443201231152319351/</a></span></p>
<p>   Iframe易于嵌套及管理页面，但经常遇到跨域、父子页面访问问题，对于子页面访问父页面可以兼容性地通过window.Top或window.Parent或window.frameElement等操作，但对于标题中四个对象，一直没有完整测试过，故买个苦力，分享给大家。<br />
  <br />
</p>
<table border="1" cellpadding="0" cellspacing="0" align="center">
  <tbody>
    <tr>
      <td align="center"><p><br />
      </p>
      </td>
      <td align="center"><strong>contentWindow</strong></td>
      <td align="center"><strong>contentDocument</strong></td>
      <td align="center"><strong>  document   <br />
      </strong></td>
      <td align="center"><strong>  frames   <br />
      </strong></td>
    </tr>
    <tr>
      <td align="center"> Firefox 11<br /></td>
      <td align="center"><strong>√ <br />
      </strong></td>
      <td align="center"> √</td>
      <td align="center"> ×</td>
      <td align="center"><strong> √</strong></td>
    </tr>
    <tr>
      <td align="center"> Opera 11<br /></td>
      <td align="center"><strong>√</strong></td>
      <td align="center"> √</td>
      <td align="center"> ×</td>
      <td align="center"><strong> √</strong></td>
    </tr>
    <tr>
      <td align="center"> Chrome 15<br />
        /360 极速 5.2<br /></td>
      <td align="center"><strong>√ <br />
      </strong></td>
      <td align="center"> ×</td>
      <td align="center"> ×</td>
      <td align="center"><strong> √ <br />
      </strong></td>
    </tr>
    <tr>
      <td align="center"> Safari 5.1<br /></td>
      <td align="center"><strong>√</strong></td>
      <td align="center"> √</td>
      <td align="center"> ×</td>
      <td align="center"><strong> √ <br />
      </strong></td>
    </tr>
    <tr>
      <td align="center"> Maxthon 3.3<br /></td>
      <td align="center"><strong>√<br />
      </strong></td>
      <td align="center"> √ <br /></td>
      <td align="center"> ×</td>
      <td align="center"><strong> √</strong></td>
    </tr>
    <tr>
      <td align="center"> IE6</td>
      <td align="center"><strong>√</strong></td>
      <td align="center"> ×</td>
      <td align="center"> √</td>
      <td align="center"><strong> √</strong></td>
    </tr>
    <tr>
      <td align="center"> IE7<br /></td>
      <td align="center"><strong>√</strong></td>
      <td align="center"> ×</td>
      <td align="center"> √</td>
      <td align="center"><strong> √</strong></td>
    </tr>
    <tr>
      <td align="center"><strong> IE8/360安全</strong></td>
      <td align="center"><strong>√</strong></td>
      <td align="center"><strong> √</strong></td>
      <td align="center"><strong> √</strong></td>
      <td align="center"><strong> √</strong></td>
    </tr>
    <tr>
      <td align="center"><strong> IE9 <br />
      </strong></td>
      <td align="center"><strong>√</strong></td>
      <td align="center"><strong> √</strong></td>
      <td align="center"><strong> √</strong></td>
      <td align="center"><strong> √</strong></td>
    </tr>
    <tr>
      <td align="center"> IE10 <br /></td>
      <td align="center"><strong>√</strong></td>
      <td align="center"> √</td>
      <td align="center"> ×</td>
      <td align="center"><strong> √</strong></td>
    </tr>
    <tr>
      <td align="center"> 搜狗/QQ/<br />
        百度IE<br /></td>
      <td align="center"><strong>√</strong></td>
      <td align="center"> ×</td>
      <td align="center"> √</td>
      <td align="center"><strong> √</strong></td>
    </tr>
    <tr>
      <td align="center"> 百度极速<br /></td>
      <td align="center"><strong>√</strong></td>
      <td align="center"> √</td>
      <td align="center"> ×</td>
      <td align="center"><strong> √</strong></td>
    </tr>
  </tbody>
</table>
<br />
结论：<br />
    1. 就浏览器而言(横向)，IE8/IE9/360安全浏览器全部支持；<br />
    2. 就属性而言(纵向)，contentWindow和frames所有浏览器都支持，其次是contentDocument，document支持性最差；<br />
    3. 由于iframe经常涉及跨域，本地测试（即未发布）环境中，chrome/360极速/IE6/IE9对于contentWindow.document属性是deny状态，原因是Unsafe JavaScript attempt to access frame with URL <a title="file:///E:/SVN_LOTTERY/html/caipiao_2012/iframe.html" target="_blank" rel="nofollow">file:///***.html</a> from frame with URL <a title="file:///E:/SVN_LOTTERY/html/caipiao_2012/web/snippets/lucky.html" target="_blank" rel="nofollow">file:///***.html</a> Domains, protocols and ports must match。IE9本地环境下对于contentDocument也是deny的。
</body>
</html>
